import { View, Text, Image } from "@tarojs/components";

import "./index.scss";
import Taro, { useLoad } from "@tarojs/taro";
import IconFont from "@/components/iconfont";
import { useState } from "react";
import apiRequest from "@/service/apiRequest";
import { API_URL } from "@/constants/api";
import { useUserInfo } from "@/hooks/useUserInfo";
import { requestUploadFile } from "@/utils/common";

function PetIdentify() {
    const { userInfo } = useUserInfo();
    const [image, setImage] = useState('');
    const [amountInfo, setAmountInfo] = useState<any>({});
    const [tip, setTip] = useState("");
    // 选择图片
    const chooseImage = (sourceType: any = ['album', 'camera']) => {
        Taro.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType,
            success: async (res) => {
                setImage(res.tempFilePaths[0]);
            }
        });
    };

    const requestTips = async () => {
        const { content } = await apiRequest.get("/api/commons/setting_tips", { tradeType: "PET_IDENTIFY_TIP" });
        if (content) {
            setTip(content);
        }
    }

    const requestPayAmount = async () => {
        const pay_amount = await apiRequest.get("/api/pet_identifies/pay_amount");
        if (pay_amount) {
            setAmountInfo(pay_amount);  
        }
    }

    useLoad(() => {
        requestTips();
        requestPayAmount();
    })

    const handleSubmit = async () => {
        Taro.showLoading({
            title: '鉴定中...',
        });
        let res: any = await requestUploadFile(image, `${userInfo.pid}_identify_${image.substring(image.lastIndexOf('/')+1)}`, {
            formData: {'user_id': userInfo.userId}
        }, `${API_URL}/pet/api/pet_identifies/create_order`, false).catch(() => {
            Taro.hideLoading();
        });
        console.log(res);
        Taro.hideLoading();
        if (res.data) {
            let { userId, id } = res.data;
            Taro.redirectTo({
                url: `/petIdentify/pages/detail/index?id=${id}&user_id=${userId}`
            })
        }
        
    }

    return (
        <View className="pet-identify-page">
            {
                tip ? (
                    <View className='health-tips'>
                        <View className='tips-title'>
                            <IconFont name='pet-jiankangtishi' size={40} />
                            <Text>提示</Text>
                        </View>
                        <View className='tips-content'>{ tip }</View>
                    </View>
                ) : null
            }
            <View>
                {
                    image ? (
                        <View>
                            <Image src={image} className='pet-image' mode="aspectFill" onClick={() => chooseImage()} />
                        </View>
                    ) : (
                        <View className='add-image pet-image flex-c-c-c' onClick={() => chooseImage()}>
                            <Text className='add-icon'>+</Text>
                            <Text className='add-text'>添加图片</Text>
                        </View>
                    )
                }
            </View>

            { 
                image ? (
                    <View className="footer-bar-wrapper">
                        <View className="pay-box flex-b-c">
                            <View className="pay-t">
                                <View>
                                    <Text className="label">原价:</Text>
                                    <Text className="pay-amount pay-line-amount">￥{ amountInfo.price !== undefined && parseFloat(amountInfo.price).toFixed(2) }</Text>
                                </View>
                                <View>
                                    <Text className="label">活动价:</Text>
                                    <Text className="pay-amount">￥{ amountInfo.discount !== undefined && parseFloat(amountInfo.discount).toFixed(2) }</Text>
                                </View>
                            </View>
                            <View className="pay-btn" onClick={handleSubmit}>去鉴定</View>
                        </View>
                    </View>

                ) : null 
            }
        </View>
    )
}

export default PetIdentify;